<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item label="所属门店" prop="userName">
        <treeselect
          style="width: 250px;"
          v-model="queryParams.shopId"
          :options="deptList"
          :show-count="true"
          placeholder="请选择门店"
        />
      </el-form-item>
      <el-form-item label="日期" prop="date">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="initData">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <line-chart
          v-if="showMealTrendTime"
          chartTitle="每月出餐平均时间"
          :chart-data="mealTrendTimeChartData"
          :chart-config="mealTrendTimeChartConfig"
          height="400px"
        />
      </el-col>
    </el-row>
    <el-table :data="tableData" v-loading="loading" stripe>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="deptName" label="门店"></el-table-column>
      <el-table-column label="菜品数量">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="queryDishesInfo('','',scope.row)">
            A({{ scope.row.acount }})B({{ scope.row.bcount }})C({{
            scope.row.ccount
            }})
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="avgCookTime" label="平均切配耗时"></el-table-column>
      <el-table-column prop="avgServeTime" label="平均加工耗时"></el-table-column>
      <el-table-column prop="avgTime" label="平均耗时"></el-table-column>
      <el-table-column prop="consumeTime" label="出餐耗时"></el-table-column>
    </el-table>
    <pagination
      :total="total"
      :show="total > 0"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :visible.sync="dialogTableVisible" width="1200px" :close-on-click-modal="false">
      <el-table :data="gridData">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column property="orderNo" label="单号"></el-table-column>
        <el-table-column property="name" label="菜品名称"></el-table-column>
        <el-table-column property="atchType" label="菜品类型" width="80"></el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">{{ parseTime(scope.row.callUpTime) }}</template>
        </el-table-column>
        <el-table-column label="配菜时间">
          <template slot-scope="scope">{{ parseTime(scope.row.cookFinishTime) }}</template>
        </el-table-column>
        <el-table-column label="传菜时间">
          <template slot-scope="scope">{{ parseTime(scope.row.serveFinishTime) }}</template>
        </el-table-column>
        <el-table-column property="totalTime" label="出菜耗时" width="80"></el-table-column>
        <el-table-column property="cookTime" label="配菜耗时" width="80"></el-table-column>
        <el-table-column property="serveTime" label="传菜耗时" width="80"></el-table-column>
        <el-table-column property="serveTime" label="是否被迫异常" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.timeOutType=='1'">否</span>
            <span v-if="scope.row.timeOutType=='2'">是</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="kscTotal"
        :show="kscTotal > 0"
        :page.sync="kscQueryParams.pageNum"
        :limit.sync="kscQueryParams.pageSize"
        @pagination="getKscList"
      />
    </el-dialog>
  </div>
</template>
<script>
import lineChart from "@/views/dashboard/LineChart.vue";
import {
  getBsKscDayList,
  buildDayDataChart,
  buildDayAvgTimeDataChart
} from "@/api/liangshi/bsKscDay";
import { treeselect as listDept } from "@/api/system/dept";
import {
  getKscAndArchItemInfoByDate,
  getMealStatData,
  getMealTrendChartData
} from "@/api/liangshi/kcKcs";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { lineChart, Treeselect },
  data() {
    return {
      dialogTableVisible: false,
      loading: false,
      showDishesCount: false,
      showDishesAvgTime: false,
      showMealTrendTime: false,
      mealTrendTimeChartData: [],
      gridData: [],
      deptList: [],
      // 日期范围
      dateRange: [],
      mealTrendTimeChartConfig: {
        xAxisData: [],
        legendData: [
          // "平均切配时间",
          // "平均加工时间",
          // "平均总耗时",
          // "A类菜平均切配时间",
          // "A类菜平均加工时间",
          // "A类菜平均总耗时",
          // "B类菜平均切配时间",
          // "B类菜平均加工时间",
          // "B类菜平均总耗时",
          // "C类菜平均切配时间",
          // "C类菜平均加工时间",
          // "C类菜平均总耗时",
        ]
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: "1"
      },
      kscQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      kscTotal: 0,
      tableData: []
    };
  },
  created() {
    this.initData();
    this.getDeptList();
  },
  methods: {
    getKscList() {
      getKscAndArchItemInfoByDate(this.kscQueryParams).then(res => {
        this.gridData = res.rows;
        this.kscTotal = res.total;
        this.dialogTableVisible = true;
      });
    },
    queryDishesInfo(itemType, outType, item) {
      this.kscQueryParams.date = item.date;
      this.kscQueryParams.shift = item.shift;
      this.kscQueryParams.shopId = this.queryParams.shopId;
      this.getKscList();
    },
    getDeptList() {
      listDept().then(res => {
        this.deptList = res.data;
      });
    },
    initData() {
      this.getList();
      this.getMealTrendChartData();
    },
    getList() {
      this.loading = true;
      getMealStatData(
        this.addDateRange(this.queryParams, this.dateRange, true)
      ).then(res => {
        this.loading = false;
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    getMealTrendChartData() {
      this.showMealTrendTime = false;
      this.mealTrendTimeChartData = [];
      getMealTrendChartData(
        this.addDateRange(this.queryParams, this.dateRange, true)
      ).then(res => {
        const dateList = [];

        const aAvgCookTimeList = [];
        const aAvgServeTimeList = [];
        const aAvgTimeList = [];

        const bAvgCookTimeList = [];
        const bAvgServeTimeList = [];
        const bAvgTimeList = [];

        const cAvgCookTimeList = [];
        const cAvgServeTimeList = [];
        const cAvgTimeList = [];
        const deptList = [];
        res.data.forEach(item => {
          if (!deptList.includes(item.deptName)) {
            deptList.push(item.deptName);
          }
          if (!dateList.includes(item.date)) {
            dateList.push(item.date);
          }
        });
        dateList.forEach(date=>{


        deptList.forEach(dept => {
          const avgCookTimeList = [];
          const avgServeTimeList = [];
          const avgTimeList = [];
          res.data.forEach(item => {
            if (dept === item.deptName) {
              avgCookTimeList.push(item.avgCookTime);
              avgServeTimeList.push(item.avgServeTime);
              avgTimeList.push(item.avgTime);

              // aAvgCookTimeList.push(item.aavgCookTime);
              // aAvgServeTimeList.push(item.aavgServeTime);
              // aAvgTimeList.push(item.aavgTime);

              // bAvgCookTimeList.push(item.bavgCookTime);
              // bAvgServeTimeList.push(item.bavgServeTime);
              // bAvgTimeList.push(item.bavgTime);

              // cAvgCookTimeList.push(item.cavgCookTime);
              // cAvgServeTimeList.push(item.cavgServeTime);
              // cAvgTimeList.push(item.cavgTime);
            }
          });
          const name = dept + "平均切配时间";
          const name1 = dept + "平均加工时间";
          const name2 = dept + "平均总耗时";
          this.mealTrendTimeChartData.push({
            name: name,
            data: avgCookTimeList
          });
          this.mealTrendTimeChartData.push({
            name: name1,
            data: avgServeTimeList
          });
          this.mealTrendTimeChartData.push({ name: name2, data: avgTimeList });
          this.mealTrendTimeChartConfig.legendData.push(name);
          this.mealTrendTimeChartConfig.legendData.push(name1);
          this.mealTrendTimeChartConfig.legendData.push(name2);
        });

        this.mealTrendTimeChartConfig.xAxisData = dateList;
        this.showMealTrendTime = true;
        // this.mealTrendTimeChartData.push({name:'A类菜平均切配时间',data:aAvgCookTimeList})
        // this.mealTrendTimeChartData.push({name:'A类菜平均加工时间',data:aAvgServeTimeList})
        // this.mealTrendTimeChartData.push({name:'A类菜平均总耗时',data:aAvgTimeList})

        // this.mealTrendTimeChartData.push({name:'B类菜平均切配时间',data:bAvgCookTimeList})
        // this.mealTrendTimeChartData.push({name:'B类菜平均加工时间',data:bAvgServeTimeList})
        // this.mealTrendTimeChartData.push({name:'B类菜平均总耗时',data:bAvgTimeList})

        // this.mealTrendTimeChartData.push({name:'C类菜平均切配时间',data:cAvgCookTimeList})
        // this.mealTrendTimeChartData.push({name:'C类菜平均加工时间',data:cAvgServeTimeList})
        // this.mealTrendTimeChartData.push({name:'C类菜平均总耗时',data:cAvgTimeList})
      });
    },
    getDishesAvgTimeChartData() {
      this.showDishesAvgTime = false;
      this.dishesAvgTimeChartData = [];
      buildDayAvgTimeDataChart(
        this.addDateRange(this.queryParams, this.dateRange, true)
      ).then(res => {
        this.dishesAvgTimeChartConfig.xAxisData = res.dayData;
        this.dishesAvgTimeChartData.push({
          name: "每天平均出餐时间",
          data: res.avgTotalTime
        });
        this.dishesAvgTimeChartData.push({
          name: "A类菜品平均出餐时间",
          data: res.avgATotalTime
        });
        this.dishesAvgTimeChartData.push({
          name: "B类菜品平均出餐时间",
          data: res.avgBTotalTime
        });
        this.dishesAvgTimeChartData.push({
          name: "C类菜品平均出餐时间",
          data: res.avgCTotalTime
        });
        this.showDishesAvgTime = true;
      });
    }
  }
};
</script>

<style>
</style>